@import "../cfg";

:global {
  .theme-dark {
    color: #999;

    h1, h2, h3, h4, h5, h6 {
      color: #999;
    }

    a {
      color: @dark-blue;

      &:hover {
        color: @dark-blue * 1.5;
      }
    }

    .CodeMirror-gutter-filler,
    .CodeMirror-scrollbar-filler,
    .CodeMirror-scroll,
    .CodeMirror-gutters {
      background-color: @editor_bg_dark;
    }

    .CodeMirror-linenumber {
      color: #555;
    }

    .CodeMirror-cursor {
      border-color: #999;
    }

    .CodeMirror-line,
    pre.CodeMirror-line {
      color: #aaa;
    }

    .cm-ip {
      color: #096dd9;
    }

    .frame {
      .current-version a:hover {
        color: @font_color_dark * 1.5;
      }

      .pref-cm {
        border-color: @bd_color_dark;
      }
    }

    .cm-s-default {
      .cm-builtin {
        color: @dark-blue * 1.2;
      }

      .cm-error {
        color: #c36;
      }
    }

    #hosts-group {
      .hosts-group-list {
        border-color: @bd_color_dark;

        .hosts-item:hover {
          background: @editor_bg_dark * 1.5;
        }
      }
    }

    // antd
    .ant-input {
      background: @ipt_bg_dark;
      color: @font_color_dark;
      border-color: @bd_color_dark;

      &::placeholder {
        color: #666;
      }
    }

    .ant-input-prefix {
      i {
        color: @font_color_dark;
      }
    }

    .ant-btn {
      background-color: @dark-hl;
      border-color: @bd_color_dark;
      color: @font_color_dark * 1.5;

      &:hover {
        background-color: @dark-hl * 1.2;
        border-color: @bd_color_dark;
        color: @font_color_dark * 1.5;
      }
    }

    .ant-btn-primary {
      background-color: @dark-blue;
      border-color: @dark-blue * 0.8;

      &:hover {
        background-color: @dark-blue * 1.2;
        border-color: @dark-blue;
        color: @font_color_dark * 1.5;
      }
    }

    .ant-btn[disabled] {
      background-color: @dark-hl * 0.6;
      color: @dark-hl* 0.8;
      border-color: @bd_color_dark;

      &:hover {
        border-color: @bd_color_dark;
        background-color: @dark-hl * 0.8;
      }
    }

    .ant-tabs,
    .ant-modal-confirm-body .ant-modal-confirm-title,
    .ant-modal-confirm-body .ant-modal-confirm-content,
    .ant-input-affix-wrapper .ant-input-prefix,
    .ant-input-affix-wrapper .ant-input-suffix {
      color: @font_color_dark;
    }

    .ant-modal-header,
    .ant-modal-content,
    .ant-modal-footer {
      background-color: @editor_bg_dark;
      color: @font_color_dark;
      border-color: @bd_color_dark;
    }

    .ant-modal-content {
      border: 1px solid @bd_color_dark;
    }

    .ant-modal-title {
      color: @font_color_dark;

      h3 {
        color: @font_color_dark;
      }
    }

    .ant-modal-close,
    .ant-notification-notice-close,
    .ant-checkbox-wrapper {
      color: @font_color_dark;
    }

    .ant-modal-close:focus, .ant-modal-close:hover {
      color: @font_color_dark * 1.5;
    }

    .ant-tabs-nav {
      .ant-tabs-tab-active {
        color: @dark-blue;
      }
    }

    .ant-tabs {
      .ant-tabs-left-bar {
        border-right-color: @bd_color_dark;
      }

      .ant-tabs-left-content {
        border-left-color: @bd_color_dark;
      }
    }

    .ant-tabs-ink-bar {
      background-color: @dark-blue;
    }

    .ant-checkbox-inner {
      border-color: @bd_color_dark;
      background-color: @ipt_bg_dark;
    }

    .ant-checkbox-checked .ant-checkbox-inner {
      border-color: @dark-blue;
      background-color: @dark-blue;
    }

    .ant-input-number-handler-wrap,
    .ant-input-number-input,
    .ant-input-number,
    .ant-select-selection,
    .ant-select-dropdown {
      background-color: @ipt_bg_dark;
      border-color: @bd_color_dark;
      color: @font_color_dark;
    }

    .ant-select-dropdown-menu-item:hover {
      background-color: @dark-hl;
    }

    .ant-select-arrow, .ant-popover-arrow {
      background-color: @ipt_bg_dark;
    }

    .ant-select-arrow,
    .ant-input-number-handler {
      color: @font_color_dark;
    }

    .ant-select-dropdown-menu-item-selected,
    .ant-select-dropdown-menu-item-selected:hover {
      background: @dark-hl;
      color: @font_color_dark;
    }

    .ant-input-number-handler-down-inner,
    .ant-input-number-handler-up-inner,
    .ant-select-dropdown-menu-item {
      color: @font_color_dark;
    }

    .ant-input-number-handler-down {
      border-color: @bd_color_dark;
    }

    .ant-radio-button-wrapper {
      border-color: @bd_color_dark;
      background: @ipt_bg_dark;
      color: @font_color_dark;

      &:first-child {
        border-left-color: @bd_color_dark;
      }
    }

    .ant-radio-button-wrapper-disabled,
    .ant-radio-button-wrapper-disabled:hover,
    .ant-radio-button-wrapper-disabled:first-child {
      //opacity: 0.5;
      border-color: @bd_color_dark * 0.618;
      background: @ipt_bg_dark * 0.618;
      color: @font_color_dark * 0.618;
    }

    .ant-radio-button-wrapper-checked,
    .ant-radio-button-wrapper-checked:hover,
    .ant-radio-button-wrapper-checked:first-child {
      box-shadow: -1px 0 0 0 @dark-blue;
      border-color: @dark-blue;
      background-color: @dark-hl;
      color: @font_color_dark * 1.5;

      &.ant-radio-button-wrapper-disabled {
        box-shadow: none;
        border-color: @bd_color_dark * 1.2;
        background: @ipt_bg_dark * 1.2;
        color: @font_color_dark * 1.2;
      }
    }

    .ant-radio-button-wrapper-checked {
      &.ant-radio-button-wrapper-disabled {
        border-left: 1px solid (@bd_color_dark * 1.2);
      }
    }

    .ant-radio-button-wrapper:not(:first-child):before {
      background-color: @bd_color_dark;
    }
  }
}
